<template>
  <div class="page-course-list">
    <masker :opacity=".7">
      <div slot="default">
        <img class="course-thumb" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png " alt="">
      </div>
      <div slot="content" class="course-intro">
        <h1 class="course-title">{{course.title}}</h1>
        <time class="course-create-time">{{course.createTime}}</time>
        <br>
        <box style="padding-top: 15px">
          <flexbox>
          </flexbox>
        </box>
      </div>
    </masker>
    <br>
    <div style="padding: 0 10px;">
      <x-button type="warn"
                plain
                @click.native="buy">
        <span class="ion-ios-cart"></span> 购买本课程
      </x-button>
    </div>
    <br>
    <card :header="{title:'课程信息概览'}">
      <div slot="content" class="">
        <grid :rows="4" class="course-info-summary">
          <grid-item label="章节数目">
            <div class="summary-item" style="margin-top: 5px;">
              {{chapterCount}}
            </div>
          </grid-item>
          <grid-item label="课程时长">
            <div class="summary-item" style="margin-top: 5px;">
              {{courseDuration}}
            </div>
          </grid-item>
          <grid-item label="视频数目">
            <div class="summary-item" style="margin-top: 5px;">
             {{videoCount}}
            </div>
          </grid-item>
          <grid-item label="课程价格">
            <div class="summary-item" style="margin-top: 5px;">
              ￥ {{cost}}
            </div>
          </grid-item>
        </grid>
      </div>
    </card>
    <br>
    <divider><span class="ion-ios-bookmarks-outline"></span> 课程简介</divider>
    <div class="course-summary">
      {{course.comment}}

      <p>
        本系列培训以BACB发布的“注册行为技术员（RBT™）必备基本技能”为大纲，为符合40个小时的RBT资质考试要求而设置。国际行为分析师认证委员会（BACB）没有为本培训提供内容。
      </p>
      <p>
        美国加州州立大学北岭分校提供教学材料 <br>
        BCBA 主讲 <br>
        经验丰富的双语BCBA协助翻译，整理，编辑 <br>
        大量案例分析，实操与美国机构提供的教学视频 <br>
        网络与面授结合 <br>
        课程设置灵活，可整套学习，也可以利用片碎时间学习部分重点内容 <br>
        教材：【应用行为分析入门手册】
      </p>

    </div>
    <br>
    <divider> <span class="ion-ios-paper-outline"></span> 课程章节</divider>
    <group title="">
      <template v-for="chapter in course.chapterEntityList">
        <cell :title="chapter.title || ''"
              is-link
              :border-intent="false"
              :arrow-direction="!chapter.showChild ? 'up' : 'down'"
              @click.native="chapter.showChild = !chapter.showChild"
        >
          <span class="ios-folder-outline" slot="icon"></span>
          <span slot="value">
            <span v-if="chapter.videoEntityList">
              视频数目&nbsp;<badge :text="chapter.videoEntityList.length" ></badge>
            </span>
            <span v-else>暂无视频</span>
          </span>&nbsp;

        </cell>
        <group class="video-list" v-show="chapter.showChild" style="margin-left: 5px">
          <cell-box v-for="video in chapter.videoEntityList"
                    :border-intent="false"
                    class="sub-item"
                    :link="{name: 'videoDetail',params: {cid: course.id, vid:video.id, sid: chapter.id}}"
                    is-link>
                <span class="ion-ios-videocam-outline"></span> {{video.comment}}
          </cell-box>
        </group>
      </template>
    </group>

    <br>
    <divider> <span class="icon ion-ios-people-outline" style="font-size: 120%"></span> 讲师</divider>
    <div class="teacher-intro">
      <img class="teacher-avatar" src="../assets/images/teacher_ma.jpg" alt="">
      <h3 class="teacher-name">讲师 马凌冬</h3>
      <p>
        凌冬工作室创办者马凌冬，持有美国应用行为分析师执照 (BCBA)，是LACare 认定的美国医疗健康服务提供者。从事自闭症儿童教育工作多年，在美国洛杉矶地区长期为亚裔家长和儿童提供帮助，同时也为国内自闭症机构和家长提供咨询和培训。
      </p>
      <p>
        本工作室希望成为中国自闭症康复事业与国际先进治疗理念接轨的桥梁。我们通过网络平台，引进美国成熟的教学方案和培训系统，为国内的家长、机构和治疗师提供自闭症康复中文远程课程。衷心希望通过社会、老师、家长和治疗师的共同努力，使孩子们在全面康复训练过程中，发挥最大的潜能。
      </p>
      <divider> <span class="ion-ios-color-filter-outline" style="font-size: 120%;"></span> 历程</divider>
      <timeline class="teacher-event">
        <timeline-item>
          <h4>翻译阿尔伯特·J.卡尼（美）“应用行为分析入门手册”`</h4>
          <p>2016年</p>
        </timeline-item>
        <timeline-item>
          <h4>与Makoto Shibutani（美）共同设计“情感与社交技能训练系列游戏”</h4>
          <p>2015年</p>
        </timeline-item>
        <timeline-item>
          <h4>翻译 斯坦利 格林斯班（美）“地板时光-如何帮助孤独症及相关障碍儿童沟通和思考”</h4>
          <p>2013年</p>
        </timeline-item>
        <timeline-item>
          <h4>与 Makoto Shibutani (美) 合著 “100则社交故事和安全意识训练手册”</h4>
          <p>2011年</p>
        </timeline-item>
        <timeline-item>
          <h4 class="recent">任洛杉矶自闭症关怀非盈利组织副理事，中美培训项目和教学计划总监。</h4>
          <p class="recent">2010年至今</p>
        </timeline-item>
      </timeline>
    </div>
  </div>
</template>

<script>
  import { Masker, Divider, Card, Flexbox, FlexboxItem, Group, Cell, Panel, XButton, Box, Grid, GridItem, Timeline, TimelineItem, Badge, CellBox, Alert } from 'vux'
  import service from '../models/services'
  import formatVideoDuration from '../util/formatVideoDuration'
  import moment from 'moment'

  export default {
    data () {
      return {
        course: {
          chapterEntityList: []
        }
      }
    },
    computed: {
      chapterCount () {
        let c = 0
        if (this.course && this.course.chapterEntityList) {
          c = this.course.chapterEntityList.length
        }
        return c
      },
      courseDuration () {
        let duration = 0
        this.course.chapterEntityList.forEach((cha) => {
          if (!cha.videoEntityList) {
            return false
          }
          cha.videoEntityList.forEach((video) => {
            duration += video.duration
          })
        })
        return formatVideoDuration(duration)
      },
      videoCount () {
        let c = 0
        this.course.chapterEntityList.forEach((cha) => {
          if (!cha.videoEntityList) {
            return false
          }
          cha.videoEntityList.forEach(() => {
            c += 1
          })
        })
        return c
      },
      cost () {
        let c = 0
        this.course.chapterEntityList.forEach((cha) => {
          c += cha.price
        })
        return (c / 100).toFixed(2)
      }
    },
    components: {
      Masker,
      Divider,
      Card,
      Flexbox,
      FlexboxItem,
      Group,
      Cell,
      Panel,
      XButton,
      Box,
      Grid,
      GridItem,
      Timeline,
      TimelineItem,
      Badge,
      CellBox,
      Alert
    },
    methods: {
      buy () {
        const self = this
        service.car.addCourse({
          cid: this.course.id
        })
        .then((res) => {
          const code = res.data.code
          this.$router.push({
            name: 'pay'
          })
          if (code === 0) {
            this.$router.push({
              name: 'pay'
            })
          } else {
            this.$vux.alert.show({
              title: '错误提示',
              content: res.data.message,
              onShow () {
                self.$router.push({
                  name: 'courseList'
                })
              },
              onHide () {
              }
            })
          }
        })
      }
    },
    created () {
      const id = this.$route.params.id
      service.course.get(id)
      .then((response) => {
        if (response.data.code === 0) {
          const list = response.data.result
          list.createTime = moment(list.createTime * 1000).format('YYYY-MM-DD')
          list.chapterEntityList.forEach((chapter) => {
            chapter.showChild = false
            chapter.isBuy = false
            service.chapter.getPurchaseStatus(list.id, chapter.id)
            .then((res) => {
              if (res.data.code === 0) {
                chapter.isBuy = res.data.result
              }
            })
          })
          this.course = list
        }
      })
    }
  }
</script>

<style lang="scss">
  .vux-no-group-title {
    margin-top: 0;
  }
  .video-list {
  .weui-cells  {
    margin-top: 0;
  }
  }
</style>

<style scoped lang="scss">
  .course-intro {
    text-align: center;
    color: #FFF;
    .course-title {
      margin: 20px 0 10px 0;
      font-size: 20px;
      line-height: 22px;
      color: #FFF;
    }

    .course-create-time {
      font-size: 12px;
      color: #999;
    }
  }

  .course-thumb {
    display: block;
    width: 100%;
  }

  .course-summary {
    font-size: 12px;
    padding: 0 15px;
    line-height: 1.2;
    color: #666;
    P {
      margin: 10px 0;
    }
  }

  .course-info-summary {
    text-align: center;

    .weui-grid {
      color: #666;
    }

    .weui-grid__label {
      margin-bottom: 5px;
    }
  }

  .teacher-intro {
    padding: 5px 15px;
    font-size: 13px;
    line-height: 1.2;
    color: #999;
    P {
      margin: 0 0 10px 0;
      text-align: justify;
    }
    .teacher-avatar {
      float: left;
      width: 140px;
      margin: 0 5px 0 0;
    }

    .teacher-name {
      margin-bottom: 5px;
      color: #666;
    }

    .teacher-event {
      padding: 0;
      h4 {
        color: #888;
      }
    }
  }
</style>
